<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js"><span id='Ext-layout-ContainerLayout'>/**
</span> * @class Ext.layout.ContainerLayout
 * &lt;p&gt;This class is intended to be extended or created via the &lt;tt&gt;&lt;b&gt;{@link Ext.Container#layout layout}&lt;/b&gt;&lt;/tt&gt;
 * configuration property.  See &lt;tt&gt;&lt;b&gt;{@link Ext.Container#layout}&lt;/b&gt;&lt;/tt&gt; for additional details.&lt;/p&gt;
 */
Ext.layout.ContainerLayout = Ext.extend(Object, {
<span id='Ext-layout-ContainerLayout-cfg-extraCls'>    /**
</span>     * @cfg {String} extraCls
     * &lt;p&gt;An optional extra CSS class that will be added to the container. This can be useful for adding
     * customized styles to the container or any of its children using standard CSS rules. See
     * {@link Ext.Component}.{@link Ext.Component#ctCls ctCls} also.&lt;/p&gt;
     * &lt;p&gt;&lt;b&gt;Note&lt;/b&gt;: &lt;tt&gt;extraCls&lt;/tt&gt; defaults to &lt;tt&gt;''&lt;/tt&gt; except for the following classes
     * which assign a value by default:
     * &lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
     * &lt;li&gt;{@link Ext.layout.AbsoluteLayout Absolute Layout} : &lt;tt&gt;'x-abs-layout-item'&lt;/tt&gt;&lt;/li&gt;
     * &lt;li&gt;{@link Ext.layout.Box Box Layout} : &lt;tt&gt;'x-box-item'&lt;/tt&gt;&lt;/li&gt;
     * &lt;li&gt;{@link Ext.layout.ColumnLayout Column Layout} : &lt;tt&gt;'x-column'&lt;/tt&gt;&lt;/li&gt;
     * &lt;/ul&gt;&lt;/div&gt;
     * To configure the above Classes with an extra CSS class append to the default.  For example,
     * for ColumnLayout:&lt;pre&gt;&lt;code&gt;
     * extraCls: 'x-column custom-class'
     * &lt;/code&gt;&lt;/pre&gt;
     * &lt;/p&gt;
     */
<span id='Ext-layout-ContainerLayout-cfg-renderHidden'>    /**
</span>     * @cfg {Boolean} renderHidden
     * True to hide each contained item on render (defaults to false).
     */

<span id='Ext-layout-ContainerLayout-property-activeItem'>    /**
</span>     * A reference to the {@link Ext.Component} that is active.  For example, &lt;pre&gt;&lt;code&gt;
     * if(myPanel.layout.activeItem.id == 'item-1') { ... }
     * &lt;/code&gt;&lt;/pre&gt;
     * &lt;tt&gt;activeItem&lt;/tt&gt; only applies to layout styles that can display items one at a time
     * (like {@link Ext.layout.AccordionLayout}, {@link Ext.layout.CardLayout}
     * and {@link Ext.layout.FitLayout}).  Read-only.  Related to {@link Ext.Container#activeItem}.
     * @type {Ext.Component}
     * @property activeItem
     */

<span id='Ext-layout-ContainerLayout-property-monitorResize'>    // private
</span>    monitorResize:false,
<span id='Ext-layout-ContainerLayout-property-activeItem'>    // private
</span>    activeItem : null,

<span id='Ext-layout-ContainerLayout-method-constructor'>    constructor : function(config){
</span>        this.id = Ext.id(null, 'ext-layout-');
        Ext.apply(this, config);
    },

<span id='Ext-layout-ContainerLayout-property-type'>    type: 'container',
</span>
<span id='Ext-layout-ContainerLayout-method-IEMeasureHack'>    /* Workaround for how IE measures autoWidth elements.  It prefers bottom-up measurements
</span>      whereas other browser prefer top-down.  We will hide all target child elements before we measure and
      put them back to get an accurate measurement.
    */
    IEMeasureHack : function(target, viewFlag) {
        var tChildren = target.dom.childNodes, tLen = tChildren.length, c, d = [], e, i, ret;
        for (i = 0 ; i &lt; tLen ; i++) {
            c = tChildren[i];
            e = Ext.get(c);
            if (e) {
                d[i] = e.getStyle('display');
                e.setStyle({display: 'none'});
            }
        }
        ret = target ? target.getViewSize(viewFlag) : {};
        for (i = 0 ; i &lt; tLen ; i++) {
            c = tChildren[i];
            e = Ext.get(c);
            if (e) {
                e.setStyle({display: d[i]});
            }
        }
        return ret;
    },

<span id='Ext-layout-ContainerLayout-property-getLayoutTargetSize'>    // Placeholder for the derived layouts
</span>    getLayoutTargetSize : Ext.EmptyFn,

<span id='Ext-layout-ContainerLayout-method-layout'>    // private
</span>    layout : function(){
        var ct = this.container, target = ct.getLayoutTarget();
        if(!(this.hasLayout || Ext.isEmpty(this.targetCls))){
            target.addClass(this.targetCls);
        }
        this.onLayout(ct, target);
        ct.fireEvent('afterlayout', ct, this);
    },

<span id='Ext-layout-ContainerLayout-method-onLayout'>    // private
</span>    onLayout : function(ct, target){
        this.renderAll(ct, target);
    },

<span id='Ext-layout-ContainerLayout-method-isValidParent'>    // private
</span>    isValidParent : function(c, target){
        return target &amp;&amp; c.getPositionEl().dom.parentNode == (target.dom || target);
    },

<span id='Ext-layout-ContainerLayout-method-renderAll'>    // private
</span>    renderAll : function(ct, target){
        var items = ct.items.items, i, c, len = items.length;
        for(i = 0; i &lt; len; i++) {
            c = items[i];
            if(c &amp;&amp; (!c.rendered || !this.isValidParent(c, target))){
                this.renderItem(c, i, target);
            }
        }
    },

<span id='Ext-layout-ContainerLayout-method-renderItem'>    /**
</span>     * @private
     * Renders the given Component into the target Element. If the Component is already rendered,
     * it is moved to the provided target instead.
     * @param {Ext.Component} c The Component to render
     * @param {Number} position The position within the target to render the item to
     * @param {Ext.Element} target The target Element
     */
    renderItem : function(c, position, target){
        if (c) {
            if (!c.rendered) {
                c.render(target, position);
                this.configureItem(c);
            } else if (!this.isValidParent(c, target)) {
                if (Ext.isNumber(position)) {
                    position = target.dom.childNodes[position];
                }

                target.dom.insertBefore(c.getPositionEl().dom, position || null);
                c.container = target;
                this.configureItem(c);
            }
        }
    },

<span id='Ext-layout-ContainerLayout-method-getRenderedItems'>    // private.
</span>    // Get all rendered items to lay out.
    getRenderedItems: function(ct){
        var t = ct.getLayoutTarget(), cti = ct.items.items, len = cti.length, i, c, items = [];
        for (i = 0; i &lt; len; i++) {
            if((c = cti[i]).rendered &amp;&amp; this.isValidParent(c, t) &amp;&amp; c.shouldLayout !== false){
                items.push(c);
            }
        };
        return items;
    },

<span id='Ext-layout-ContainerLayout-method-configureItem'>    /**
</span>     * @private
     * Applies extraCls and hides the item if renderHidden is true
     */
    configureItem: function(c){
        if (this.extraCls) {
            var t = c.getPositionEl ? c.getPositionEl() : c;
            t.addClass(this.extraCls);
        }

        // If we are forcing a layout, do so *before* we hide so elements have height/width
        if (c.doLayout &amp;&amp; this.forceLayout) {
            c.doLayout();
        }
        if (this.renderHidden &amp;&amp; c != this.activeItem) {
            c.hide();
        }
    },

<span id='Ext-layout-ContainerLayout-method-onRemove'>    onRemove: function(c){
</span>        if(this.activeItem == c){
            delete this.activeItem;
        }
        if(c.rendered &amp;&amp; this.extraCls){
            var t = c.getPositionEl ? c.getPositionEl() : c;
            t.removeClass(this.extraCls);
        }
    },

<span id='Ext-layout-ContainerLayout-method-afterRemove'>    afterRemove: function(c){
</span>        if(c.removeRestore){
            c.removeMode = 'container';
            delete c.removeRestore;
        }
    },

<span id='Ext-layout-ContainerLayout-method-onResize'>    // private
</span>    onResize: function(){
        var ct = this.container,
            b;
        if(ct.collapsed){
            return;
        }
        if(b = ct.bufferResize &amp;&amp; ct.shouldBufferLayout()){
            if(!this.resizeTask){
                this.resizeTask = new Ext.util.DelayedTask(this.runLayout, this);
                this.resizeBuffer = Ext.isNumber(b) ? b : 50;
            }
            ct.layoutPending = true;
            this.resizeTask.delay(this.resizeBuffer);
        }else{
            this.runLayout();
        }
    },

<span id='Ext-layout-ContainerLayout-method-runLayout'>    runLayout: function(){
</span>        var ct = this.container;
        this.layout();
        ct.onLayout();
        delete ct.layoutPending;
    },

<span id='Ext-layout-ContainerLayout-method-setContainer'>    // private
</span>    setContainer : function(ct){
        /*
         * This monitorResize flag will be renamed soon as to avoid confusion
         * with the Container version which hooks onWindowResize to doLayout
         *
         * monitorResize flag in this context attaches the resize event between
         * a container and it's layout
         */
        if(this.monitorResize &amp;&amp; ct != this.container){
            var old = this.container;
            if(old){
                old.un(old.resizeEvent, this.onResize, this);
            }
            if(ct){
                ct.on(ct.resizeEvent, this.onResize, this);
            }
        }
        this.container = ct;
    },

<span id='Ext-layout-ContainerLayout-method-parseMargins'>    /**
</span>     * Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations
     * (e.g. 10, &quot;10&quot;, &quot;10 10&quot;, &quot;10 10 10&quot; and &quot;10 10 10 10&quot; are all valid options and would return the same result)
     * @param {Number|String} v The encoded margins
     * @return {Object} An object with margin sizes for top, right, bottom and left
     */
    parseMargins : function(v){
        if (Ext.isNumber(v)) {
            v = v.toString();
        }
        var ms  = v.split(' '),
            len = ms.length;

        if (len == 1) {
            ms[1] = ms[2] = ms[3] = ms[0];
        } else if(len == 2) {
            ms[2] = ms[0];
            ms[3] = ms[1];
        } else if(len == 3) {
            ms[3] = ms[1];
        }

        return {
            top   :parseInt(ms[0], 10) || 0,
            right :parseInt(ms[1], 10) || 0,
            bottom:parseInt(ms[2], 10) || 0,
            left  :parseInt(ms[3], 10) || 0
        };
    },

<span id='Ext-layout-ContainerLayout-property-fieldTpl'>    /**
</span>     * The {@link Ext.Template Ext.Template} used by Field rendering layout classes (such as
     * {@link Ext.layout.FormLayout}) to create the DOM structure of a fully wrapped,
     * labeled and styled form Field. A default Template is supplied, but this may be
     * overriden to create custom field structures. The template processes values returned from
     * {@link Ext.layout.FormLayout#getTemplateArgs}.
     * @property fieldTpl
     * @type Ext.Template
     */
    fieldTpl: (function() {
        var t = new Ext.Template(
            '&lt;div class=&quot;x-form-item {itemCls}&quot; tabIndex=&quot;-1&quot;&gt;',
                '&lt;label for=&quot;{id}&quot; style=&quot;{labelStyle}&quot; class=&quot;x-form-item-label&quot;&gt;{label}{labelSeparator}&lt;/label&gt;',
                '&lt;div class=&quot;x-form-element&quot; id=&quot;x-form-el-{id}&quot; style=&quot;{elementStyle}&quot;&gt;',
                '&lt;/div&gt;&lt;div class=&quot;{clearCls}&quot;&gt;&lt;/div&gt;',
            '&lt;/div&gt;'
        );
        t.disableFormats = true;
        return t.compile();
    })(),

<span id='Ext-layout-ContainerLayout-method-destroy'>    /*
</span>     * Destroys this layout. This is a template method that is empty by default, but should be implemented
     * by subclasses that require explicit destruction to purge event handlers or remove DOM nodes.
     * @protected
     */
    destroy : function(){
        // Stop any buffered layout tasks
        if(this.resizeTask &amp;&amp; this.resizeTask.cancel){
            this.resizeTask.cancel();
        }
        if(this.container) {
            this.container.un(this.container.resizeEvent, this.onResize, this);
        }
        if(!Ext.isEmpty(this.targetCls)){
            var target = this.container.getLayoutTarget();
            if(target){
                target.removeClass(this.targetCls);
            }
        }
    }
});</pre>
</body>
</html>
